<template>
    <div class="mine">
        <el-radio-group label="label position" v-model="typeSwitch">
            <el-radio-button label="1">文章</el-radio-button>
            <el-radio-button label="2">视频</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px" />
        <el-radio-group v-model="menuId">
            <el-radio v-for="(item) in menu.value" :label="item.id">{{ item.menu }}</el-radio>
        </el-radio-group>
        <el-form label-width="100px" :model="formLabelAlign" v-if="typeSwitch == 1">
            <el-form-item label="标题">
                <el-input v-model="formLabelAlign.title" />
            </el-form-item>
            <el-form-item label="文章">
                <editor ref="wangEdit" />
            </el-form-item>
        </el-form>

        <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" v-else>
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
        <div style="text-align: center;">
            <el-button type="primary" @click="pArticle">发布</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import editor from "../components/editor.vue";
import { getMenu } from '@/api/index';
import { articlePost } from '@/api/mine';
import { reactive, ref, onMounted } from 'vue'

const formLabelAlign = reactive({
    title: '',
    region: '',

})
const typeSwitch = ref('1')


import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
const menuId = ref(3)
const menu = reactive([])

onMounted(() => {
    getMenu().then((res: Object) => {
        const { code, msg, data, } = res
        if (code == 200) {
            menu.value = data
            // ElMessage.success(msg)
        } else {
            ElMessage.error(msg)
        }
    })
})

const wangEdit = ref()
const pArticle = () => {
    const { title } = formLabelAlign
    const content=wangEdit.value.valueHtml
    articlePost({ title, content, menuId: menuId.value }).then((res: Object) => {
        const { code, msg } = res
        if (code == 200) {
            ElMessage.success(msg)
        } else {
            ElMessage.error(msg)
        }
    })
}
</script>

<style lang="less" scoped>
.mine {
    max-width: 1200px;
    margin: 0 auto;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>